<template>
  <div>
    <Menu ref="wzNav" theme="light" accordion class="_wz_leftNav" :style="{minHeight: '100%',width:'240px'}" :active-name="wzNavName" :open-names="wzOpenNames" @on-select="openView">
      <template v-for="item,index in navList">
        <!--  子集就一条  只显示子集 不显示 父级   -->
        <template v-if="item.children.length == 1">
          <!--  hideInBread：true 不会显示上级菜单标题 -->
          <template v-if="item.menuHide">
            <!--循环子级 -->
            <menuData :navData="item"></menuData>
          </template>
          <!--  hideInBread：true 不会显示上级菜单标题 -->
          <template v-else>
            <Submenu :name="item.id">
              <template slot="title"><i :class="item.menuIcon"></i>{{item.name}}</template>
              <!--循环子级 -->
              <menuData :navData="item"></menuData>
            </Submenu>
          </template>
        </template>
        <!--  子集 > 1 循环渲染   -->
        <template v-else-if="item.children.length > 0">
          <Submenu :name="item.id">
            <template slot="title"><i :class="item.menuIcon"></i>{{item.name}}</template>
            <!--循环子级 -->
            <menuData :navData="item"></menuData>
          </Submenu>
        </template>
      </template>
    </Menu>
  </div>

</template>
<script>

  import menuData from "./menuData";

  export default {
    components: {
      menuData,//列表
    },
    props: ["navSelect"],
    data() {
      return {
        wzNavName: "",
        wzOpenNames: [],
        navList: [],
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
      var that = this;
      that.navList = JSON.parse(window.sessionStorage.getItem('loginData')).menu.SAFETY;
      //默认先传输过去第一个页面  tabs 使用 第一不可以关闭
      //var index = that.getMenuItem(that.navList, that.$route.name);
      var index = that.getMenuItem(that.navList, that.navList[0].children[0].menuUrl);
      index = {"label": index.name, "data": index.menuUrl}
      that.$emit("topNavList", index)//菜单点击数据传输 首页


      //默认选中的菜单 和 父级打开  end 传输现在展示菜单的数据
      that.wzNavName = that.$route.name;//菜单默认 选中
      that.wzOpenNames = that.menuExpansion(that.$route.name, that.navList);//父级默认展开
      //当前页面地址的菜单
      var mi = that.getMenuItem(that.navList, that.wzNavName);
      if (mi.data != index.data) {
        mi = {"label": mi.name, "data": mi.menuUrl}
        that.$emit("topNavList", mi)//菜单点击数据传输 现在地址上页面
      }
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法
      openView(name) {
        var that = this;
        var mi = that.getMenuItem(that.navList, name);
        mi = {"label": mi.name, "data": mi.menuUrl}
        //////////mi.show = true;
        that.$emit("topNavList", mi)//菜单点击数据传输main.vue
      },
      getMenuItem: function (dataList, name) {//获取菜单数据
        var that = this;
        for (var i = 0; i < dataList.length; i++) {
          if (!!dataList[i].children && dataList[i].children.length) {
            var data = that.getMenuItem(dataList[i].children, name)
            if (data) {
              return data;
            }
          } else {
            if (dataList[i].menuUrl == name) {
              return dataList[i];
            }
          }
        }
        return false;//这个应该不可能发生
      },
      menuExpansion: function (name, list, obj) {//菜单展开
        // 匹配名称 循环数组  本身对象  父级对象
        var that = this;
        var menusList = [];
        for (var i = 0; i < list.length; i++) {
          if (list[i].children.length > 0) {
            if (!!list[i].name) {
              menusList.push(list[i].id);
            }
            var data = that.menuExpansion(name, list[i].children, list[i]);
            if (data.length > 0) {
              menusList = menusList.concat(data);
              return menusList;
            } else {
              menusList = [];
            }
          } else {
            if (list[i].menuUrl == name) {
              menusList.push(obj.menuUrl);
              return menusList;
            }
          }
        }
        return menusList;
      },
    },
    watch: {//监听
      navSelect: function (val, oldVal) {
        var that = this;
        //菜单展开
        that.wzOpenNames = that.menuExpansion(val, that.navList);
        that.wzNavName = val;//菜单选中
        that.$nextTick(() => {//执行菜单刷新
          that.$refs.wzNav.updateOpened();
          that.$refs.wzNav.updateActiveName();
        })
      }
    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  //拂晓蓝（默认）
  ._wz_1890ff._wz_leftNav {
    .ivu-menu-light {
      background: #1890ff !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #1890ff !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1890ff !important;
    }
  }

  //薄暮
  ._wz_f5222d._wz_leftNav {
    .ivu-menu-light {
      background: #f5222d !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #f5222d !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #f5222d !important;
    }
  }

  //火山
  ._wz_fa541c._wz_leftNav {
    .ivu-menu-light {
      background: #fa541c !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #fa541c !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #fa541c !important;
    }
  }

  //日暮
  ._wz_faad14._wz_leftNav {
    .ivu-menu-light {
      background: #faad14 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #faad14 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #faad14 !important;
    }
  }

  //明青
  ._wz_13c2c2._wz_leftNav {
    .ivu-menu-light {
      background: #13c2c2 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #13c2c2 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #13c2c2 !important;
    }
  }

  //极光绿
  ._wz_52c41a._wz_leftNav {
    .ivu-menu-light {
      background: #52c41a !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #52c41a !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #52c41a !important;
    }
  }

  //极客蓝
  ._wz_2f54eb._wz_leftNav {
    .ivu-menu-light {
      background: #2f54eb !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #2f54eb !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #2f54eb !important;
    }
  }

  //酱紫
  ._wz_722ed1._wz_leftNav {
    .ivu-menu-light {
      background: #722ed1 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #722ed1 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #722ed1 !important;
    }
  }

  //伯爵黑
  ._wz_1d1e23._wz_leftNav {
    .ivu-menu-light {
      background: #1d1e23 !important;
      color: #e1e1e1 !important;
    }

    .ivu-menu {
      color: #e1e1e1 !important;
    }

    .ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-vertical .ivu-menu-submenu-title:hover {
      color: #fff !important;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #fff !important;
      box-shadow: inset 0 2px 66px rgba(255, 255, 255, 0.6);
      background: #1d1e23 !important;

    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1d1e23 !important;
    }
  }

  //菜单不加颜色的时候
  ._wz_1890ff_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #edf6ff;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1890ff;
    }
  }

  ._wz_f5222d_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #ffeff0;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #f5222d;
    }
  }

  ._wz_fa541c_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #f6e1da;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #fa541c;
    }
  }

  ._wz_faad14_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #fff7e8;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #faad14;
    }
  }

  ._wz_13c2c2_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #e3f6f6;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #13c2c2;
    }
  }

  ._wz_52c41a_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #ecfae6;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #52c41a;
    }
  }

  ._wz_2f54eb_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #ebeefc;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #2f54eb;
    }
  }

  ._wz_722ed1_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #f5eeff;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #722ed1;
    }
  }

  //伯爵黑
  ._wz_1d1e23_cyan._wz_leftNav {
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
      color: #666;
      background: #e6e6e6;
    }

    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
      background: #1d1e23;
    }
  }
</style>

